<template>
  <div class="chat">
    <!--判断用户是否处于登录状态-->
    <div v-if="userInfo.id">
      <!--头部区域-->
      <div class="header">
        <a href="" class="icon_back"></a>
        <h3>购物车</h3>
        <a href="" class="icon_menu"></a>
      </div>
      <!--安全提示-->
      <div class="jd_safe_tip">
        <p class="tip_word">
          您正在安全购物环境中，请放心购物
        </p>
      </div>
      <!--中间列表-->
      <main class="jd_shopCart_list">
        <section>
          <div class="shopCart_list_con" v-for="(goods,index) in shopCart" :key="index">
            <div class="list_con_left">
              <a href="javascript:;" class="cart_check_box" :checked="goods.checked" @click.stop="handleChecked(goods)"></a>
            </div>
            <div class="list_con_right">
              <div class="shop_img">
                <img :src="goods.thumb_url" alt="">
              </div>
              <div class="shop_con">
                <a href="">{{goods.goods_name}}</a>
                <p class="shop_price">{{goods.price / 100 | moneyFormat}}</p>
                <div class="shop_deal">
                  <div class="shop_deal_left">
                    <span @click="updateGoodsCount(goods,false)">-</span>
                    <input type="tel" v-model="goods.buy_count" disabled="disabled">
                    <span @click="updateGoodsCount(goods,true)">+</span>
                  </div>
                  <div class="shop_deal_right" @click.stop="handleDelete(goods)">
                    <span></span>
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <!--底部通栏-->
      <div id="tab_bar">
        <div class="tab_bar_left">
          <a href="javascript:;" class="cart_check_box" :checked="isSelectAll" @click.stop="selectAll(isSelectAll)"></a>
          <span style="font-size: 16px">全选</span>
          <div class="select_all">
            合计：<span class="total_price">{{totalPrice | moneyFormat}}</span>
          </div>
        </div>
        <div class="tab_bar_right">
          <a href="#" class="pay">去结算</a>
        </div>
      </div>
    </div>
    <select-login v-else></select-login>
  </div>
</template>

<script>
    import {mapState,mapActions} from 'vuex'
    import SelectLogin from '../Login/SelectLogin.vue'
    import { MessageBox } from 'mint-ui'
    export default {
        name: 'Chat',
        data(){
          return {
            isSelectAll:false,  // 是否选中所用商品   受到点击全选的影响和选择单个商品的影响。 因此要么通过两个变量控制checked，要么使用两个方法控制一个isSelectAll，明显后者更好
            isSelected: false,   // 是否选中单个商品
            totalPrice: 0,        // 商品总价格
            currentDelGoods: {}   // 当前删除的商品
          }
        },
        computed: {
          ...mapState(['userInfo']),
          ...mapState(['shopCart']),
          ...mapActions(['updateGoods'])
        },
        methods: {
          updateGoodsCount(goods,isAdd){
            // 同mapActions的方式提交(当然也可以使用dispatch的方式),但是感觉这种方法不能用，后续思考一下为什么？
            //this.updateGoods({goods,isAdd});   结论：获取state中数据可以使用mapState的方式，但是actons中的似乎出了点问题
            this.$store.dispatch('updateGoods',{goods,isAdd});
            this.getAllGoodsPrice();
          },
          selectAll(flag){
            this.isSelectAll = !flag;
            this.$store.dispatch('isSelectAll',flag);
            this.getAllGoodsPrice();
          },
          handleChecked(goods){
            this.$store.dispatch('isSelect',goods);
            this.isAll();
            this.getAllGoodsPrice();
          },
          // 计算商品总价格
          getAllGoodsPrice(){
            let total = 0;
            this.shopCart.forEach((goods,index)=>{
              if(goods.checked){
                total+=goods.price/100 * goods.buy_count;
              }
            });
           this.totalPrice = total;
          },
          isAll(){
            this.isSelectAll = this.shopCart.every((goods,index)=>{
                  return goods.checked == true
                })
          },
          handleDelete(goods){
            MessageBox.confirm('您确定要删除吗？').then(action=>{
              if(action === 'confirm'){
                this.currentDelGoods = goods;
                this.$store.dispatch('deleteSingle',this.currentDelGoods);
                this.getAllGoodsPrice();
              }
            })
          }
        },
        components: {
          SelectLogin
        },
        mounted(){
          // 通过dispatch的方式向actions提交异步请求；也可以通过...mapActions的方式获取并向actions提交,但是感觉这种方法不能用，后续思考一下为什么？
          this.$store.dispatch('getShopCart');
          this.getAllGoodsPrice();
        },
        filters: {
          // 格式化金钱
          moneyFormat(money){
            return '￥'+ money.toFixed(2);
          }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .chat
    width 100%
    height 10%
    background-color: #e0e0e0
    .header
      width 100%
      height 44px
      background-color: #ececec
      background-size 1px 44px
      -webkit-background-size 1px 44px
      border-bottom 1px solid #e0e0e0
      position fixed
      left: 0
      top 0
      display flex
      justify-content center
      align-items center
      font-size 18px
      font-weight 700
      color #E9232C
      z-index 999
    .jd_safe_tip
      margin-top 44px
      height 36px
      line-height 36px
      border-bottom 1px solid #e0e0e0
      background-color: #fff
      text-align center
      .tip_word
        display inline-block
        font-size 14px
        padding-left 20px
        position relative
        &:before  /*伪元素*/
          content: ''
          width 18px
          height 18px
          background-color: url("./images/safe_icon.png") no-repeat
          -webkit-background-size 18px 18px
          background-size 18px 18px
          position absolute
          top 9px
          left  0
    .jd_shopCart_list
      padding-bottom 100px
      background-color #e0e0e0
      section
        margin-top 15px
        border-top 1px solid #e0e0e0
        background-color #fff
        .shopCart_list_con
          padding 10px 0
          border-bottom 1px solid #e0e0e0
          .list_con_left
            .cart_check_box
              float left
              background: url('./images/shop-icon.png') no-repeat
              background-size 50px 100px
              -webkit-background-size 50px 100px
              width 20px
              height 20px
              margin-top 17px
              margin-left 7px
            .cart_check_box[checked]
              background-position -25px 0
          .list_con_right
            overflow hidden
            padding 0 7px
            .shop_img
              float left
              img
                width 80px
                height 80px
                display block
            .shop_con
              overflow hidden
              padding-left 7px
              & > a
                font-size 14px
                color #666
                line-height 20px
                height 40px
                overflow hidden
                display block
                text-decoration none
              .shop_price
                color #E9232C
                margin 5px 0
              .shop_deal
                margin-top 5px
                .shop_deal_left
                  float left
                  & > span
                    border 1px solid #e0e0e0
                    display inline-block
                    width 30px
                    height 25px
                    line-height 25px
                    text-align: center
                    float left
                    &:first-child
                      border-top-left-radius: 3px
                      border-bottom-left-radius: 3px
                    &:last-child
                      border-top-right-radius: 3px
                      border-bottom-right-radius: 3px
                  input
                    border none
                    border-top: 1px solid #e0e0e0
                    border-bottom: 1px solid #e0e0e0
                    float: left
                    width 50px
                    height 23px
                    text-align: center

                .shop_deal_right
                  float: right
                  margin-top 6px
                  & > span:first-child
                    background url("./images/delete_up.png") no-repeat
                    -webkit-background-size: 18px 4px
                    background-size: 18px 4px
                    width 18px
                    height 4px
                    display block
                  & > span:last-child
                    background url("./images/delete_down.png") no-repeat
                    -webkit-background-size: 17px 17px
                    background-size: 17px 17px
                    width 17px
                    height 17px
                    display block
                    margin-top -3px
    #tab_bar
      position fixed
      left 0
      bottom 50px
      width 100%
      height 44px
      background-color: #fff
      display flex
      justify-content space-between
      align-items center
      box-shadow 0 -5px 5px #e0e0e0
      border-bottom 1px solid #e0e0e0
      .tab_bar_left
        display flex
        align-items center
        margin-left 7px
        .cart_check_box
          float left
          background url("./images/shop-icon.png") no-repeat
          -webkit-background-size: 50px 100px
          background-size: 50px 100px
          width 20px
          height 20px
          margin-top 4px
          margin-left 4px
        .cart_check_box[checked]
          background-position: -25px 0
        .select_all
          margin-left 8px
          font-size 16px
      .tab_bar_right
        .pay
          width 90px
          height 44px
          background-color: #E9232C
          display flex
          justify-content center
          align-items center
          font-size 18px
          color #fff
          text-decoration: none
</style>
